<template>
  <div>
    <div class="itemBox">
      <p class="p1">一、基础面</p>
      <div v-for="(item, index) in itemList1" :key="index">
        <a-input class="p2" v-model="itemList1[index].problem" placeholder="请输入问题" />
        <span class="s1" @click="onDelete1(index)">x</span>
        <a-input v-if="isHaveAnswer" class="p2" v-model="itemList1[index].answer" placeholder="请输入回答" />
        <!-- <img src="~@/assets/closeImg.png" alt="" style="margin-left:5px;"/> -->
      </div>
      <a-button class="btn" @click="onClick1" type="dashed" block>+ 添加</a-button>
    </div>
    <div class="itemBox">
      <p class="p1">二、分析面</p>
      <div v-for="(item, index) in itemList2" :key="index">
        <a-input class="p2" v-model="itemList2[index].problem" placeholder="请输入问题" />
        <span class="s1" @click="onDelete2(index)">x</span>
        <a-input v-if="isHaveAnswer" class="p2" v-model="itemList2[index].answer" placeholder="请输入回答" />
      </div>
      <a-button class="btn" @click="onClick2" type="dashed" block>+ 添加</a-button>
    </div>
    <div class="itemBox">
      <p class="p1">三、拓展面</p>
      <div v-for="(item, index) in itemList3" :key="index">
        <a-input class="p2" v-model="itemList3[index].problem" placeholder="请输入问题" />
        <span class="s1" @click="onDelete3(index)">x</span>
        <a-input v-if="isHaveAnswer" class="p2" v-model="itemList3[index].answer" placeholder="请输入回答" />
      </div>
      <a-button class="btn" @click="onClick3" type="dashed" block>+ 添加</a-button>
    </div>
    <!-- <a-button class="btn" type="dashed" @click="onsubmit" block>确定</a-button> -->
  </div>

</template>
<script>
export default {
  props: ['title', 'isHaveAnswer'],
  data() {
    return {
      itemList1: [],
      itemList2: [],
      itemList3: []
    }
  },
  async created() {
  },
  methods: {
    onClick1() {
      this.itemList1.push({ problem: "", answer: "" })
    },
    onClick2() {
      this.itemList2.push({ problem: "", answer: "" })
    },
    onClick3() {
      this.itemList3.push({ problem: "", answer: "" })
    },
    onDelete1(index) {
      this.itemList1.splice(index, 1)
      // console.log(index)
    },
    onDelete2(index) {
      this.itemList2.splice(index, 1)
      // console.log(index)
    },
    onDelete3(index) {
      this.itemList3.splice(index, 1)
      // console.log(index)
    },
    getData() {
      let flag1 = true
      let flag2 = true
      let flag3 = true
      if (this.itemList1.length <= 0) {
        this.$message.warning("基础面不能为空！")
        flag1 = false
      } else {
        this.itemList1.forEach(item => {
          if (item.problem == "") {
            flag1 = false
          }
        })
        if (!flag1) {
          this.$message.warning("基础面问题不能为空！")
        }
      }
      if (this.itemList2.length <= 0) {
        this.$message.warning("分析面不能为空！")
        flag2 = false
      } else {
        this.itemList2.forEach(item => {
          if (item.problem == "") {
            flag2 = false
          }
        })
        if (!flag2) {
          this.$message.warning("分析面问题不能为空！")
        }
      }
      if (this.itemList3.length <= 0) {
        this.$message.warning("拓展面不能为空！")
        flag3 = false
      } else {
        this.itemList3.forEach(item => {
          if (item.problem == "") {
            flag3 = false
          }
        })
        if (!flag3) {
          this.$message.warning("拓展面问题不能为空！")
        }
      }
      if (flag1 && flag2 && flag3) {
        return {
          base: this.itemList1,
          analyze: this.itemList2,
          expand: this.itemList3
        }
      }
    },
    setData(obj) {
      // console.log("obj")
      // console.log(obj)
      if (obj.base != null) this.itemList1 = obj.base
      if (obj.analyze != null) this.itemList2 = obj.analyze
      if (obj.expand != null) this.itemList3 = obj.expand
    },
    getBaseProblemStr() {
      let str = ""
      this.itemList1.forEach(item => {
        str += item.problem + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    getBaseAnswerStr() {
      let str = ""
      this.itemList1.forEach(item => {
        str += item.answer + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    getAnalyzeProblemStr() {
      let str = ""
      this.itemList2.forEach(item => {
        str += item.problem + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    getAnalyzeAnswerStr() {
      let str = ""
      this.itemList2.forEach(item => {
        str += item.answer + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    getExpandProblemStr() {
      let str = ""
      this.itemList3.forEach(item => {
        str += item.problem + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    getExpandAnswerStr() {
      let str = ""
      this.itemList3.forEach(item => {
        str += item.answer + ";"
      })
      str = str.slice(0, str.length - 1) //删除最后一个逗号
      return str
    },
    onsubmit() {
      this.itemList1.forEach(item => {
        // console.log(item.problem)
      })
      this.itemList2.forEach(item => {
        // console.log(item.problem)
      })
      console.log(this.itemList3)
      this.itemList3.forEach(item => {
        // console.log(item.problem)
      })
    }
  },
}
</script>
<style lang="less" scoped>
.itemBox {
  margin-bottom: 20px;

  .p1 {
    font-weight: bold;
  }

  .p2 {
    width: 95%;
    margin-bottom: 10px;
  }

  .s1 {
    cursor: pointer;
    font-size: 20px;
    margin-left: 1.5%;
  }

  .btn {
    margin-top: 20px;
    width: 95%;
  }
}
</style>
